<template>
  <!--挂号新增页面 -->
  <el-row>
    <el-col :span="22" :offset="1">

      <el-card class="box-card" style="padding: 0 15px;">

        <el-row :gutter="0">
          <el-col :span="2" :offset="22" style="height:40px;line-height:40px;">
            <el-button type="success" @click="insertFun">保存新挂号</el-button>
          </el-col>
        </el-row>


        <!--表单信息-->
        <el-row :gutter="0">
          <el-col :span="24" :offset="0" style="">

            <el-form :inline="true" :label-position="labelPosition" label-width="80px" :model="formLabelAlign">

              <el-form-item label="挂号单号" align="left" class="width270Height40" style="">
                <el-input v-model="formLabelAlign.name"></el-input>
              </el-form-item>
              <el-form-item label="科室" align="left" class="width270Height40" style="">
                <el-select v-model="keshi.name" placeholder="请选择">
                  <el-option label="全科" value="quanke"></el-option>
                  <el-option label="儿科" value="erke"></el-option>
                  <el-option label="骨科" value="guke"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="接诊类型" align="left" class="width270Height40" style="">
                <el-select v-model="department.name" placeholder="请选择">
                  <el-option label="初诊" value="chuzhen"></el-option>
                  <el-option label="复诊" value="fuzhen"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="接诊医生" align="left" class="width270Height40" style="">
                <el-select v-model="docker.name" placeholder="请选择">
                  <el-option label="韩政" value="hanzheng"></el-option>
                  <el-option label="田立杰" value="tianlijie"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="挂号费" align="left" class="width270Height40" style="">
                <el-select v-model="register.name" placeholder="请选择">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="诊疗费" align="left" class="width270Height40" style="">
                <el-select v-model="formLabelAlign.region" placeholder="请选择">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="挂号日期" align="left" class="width270Height40" style="">
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="挂号员" align="left" class="width270Height40" style="">
                <el-input v-model="formLabelAlign.type"></el-input>
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-form-item>


              <!--开始 患者信息-->
              <el-row :gutter="0">
                <el-col :span="4" :offset="0" style="height:40px;line-height:40px;margin-top: 20px;">
                  <div style="text-align: left;font-size: 20px;color: red"><strong>患者信息</strong></div>
                </el-col>
              </el-row>
              <el-form-item label="患者姓名" align="left" class="width270Height40" style="">
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item label="患者卡号" align="left" class="width270Height40" style="">
                <el-input v-model="formLabelAlign.type"></el-input>
              </el-form-item>
              <el-form-item label="挂号员" align="left" class="width270Height40" style="">
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                  <el-select v-model="select" slot="append" style="width: 60px" placeholder="请选择">
                    <el-option label="岁" value="1"></el-option>
                    <el-option label="月" value="2"></el-option>
                    <el-option label="天" value="3"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
              <el-form-item label="出生日期" align="left" class="width270Height40" style="">
                <el-date-picker
                  v-model="value2"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="患者卡号" align="left" class="width270Height40" style="">
                <el-input v-model="formLabelAlign.type"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" align="left" class="width270Height40" style="">
                <el-input v-model="formLabelAlign.type"placeholder="请输入手机号码"></el-input>
              </el-form-item>
              <el-form-item label="证件号码" align="left" class="width270Height40" style="">
                <el-input v-model="formLabelAlign.type"placeholder="请输入证件号码"></el-input>
              </el-form-item>

              <el-form-item label="详细地址" align="left" class="width270Height40" style="">
                <el-input v-model="formLabelAlign.name" style="width: 640px"></el-input>
              </el-form-item>
              <el-form-item label="备注" align="left" class="width270Height40" style="">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  style="width: 950px"
                  v-model="textarea">
                </el-input>
              </el-form-item>
            </el-form>

          </el-col>
        </el-row>

      </el-card>

    </el-col>
  </el-row>

</template>

<script>
  export default {
    data() {
      return {
        labelPosition: 'left',
        formInline: {
          user: '',
          region: ''
        },
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },
        docker:{
          name:''
        },
        department:{
          name:''
        },
        keshi:{
          name:''
        },
        register:{
          name:''
        },
        /*日期*/
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',

        input3: '',


        input1: '',
        input2: '',
        input3: '',
        select: '',
        textarea:'',
        options: [{
          value: 'shanxi',
          label: '陕西',
          children: [{
            value: 'xianshi',
            label: '西安市',
            children: [{
              value: 'beilinqu',
              label: '碑林区'
            }, {
              value: 'yantaqu',
              label: '雁塔区'
            }, {
              value: 'changanqu',
              label: '长安区'
            }, {
              value: 'lianhuqu',
              label: '莲湖区'
            }]
          }, {
            value: 'xiayangshi',
            label: '咸阳市',
            children: [{
              value: 'qinduqu',
              label: '秦都区'
            }, {
              value: 'yanglingqu',
              label: '杨凌区'
            }]
          }]
        }, {
          value: 'zujian',
          label: '甘肃省',
          children: [{
            value: 'lanzhiushi',
            label: '兰州市',
            children: [{
              value: 'chengguanqu',
              label: '城关区'
            }, {
              value: 'qilihequ',
              label: '七里河区'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {

        }]
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

<style scoped>
  .el-header, .el-footer {
    text-align: center;
    line-height: 60px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }



  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .width1{
    width:20%;
    text-align: left;
    float: left;
  }
  .float{
    float: left;
  }
  .width3{
    width:40%;
    text-align: left;
    float:left;
  }

  .width270Height40{
    width: 270px;line-height:40px;float:left;margin-right:40px;
  }
</style>
